<template>
  <div class="col-8 ">
    <div v-if="parts" class="radius-top list-item text-weight-bold text-body q-pa-sm">
      I/O Counter: {{ parts.io_counter }}
    </div>
    <div v-if="parts" class="list-item text-weight-bold text-body q-pa-sm">
      Detailed Description: {{ parts.detail_description }}
    </div>
    <div v-if="parts" class="list-item text-weight-bold text-body q-pa-sm">
      Last Check-In Time: {{ parts.last_check_in?formatDateTimeString(parts.last_check_in):'' }}
    </div>
    <div v-if="parts" class="list-item text-weight-bold text-body q-pa-sm">
      Last Check-Out Time: {{ parts.last_check_out?formatDateTimeString(parts.last_check_out):''}}
    </div>
  </div>
  <!-- <div class="col-4" >
    <ChildItemList v-if="parts" :stock-code="parts?.stock_code" :serial-no="parts?.serial_no" class="col-3 q-ml-md" />
  </div> -->
</template>

<script setup lang="ts">
import { getPartDetailData } from 'src/services/partsService';
import { Parts } from 'src/services/type';
import { ref } from 'vue';
import {formatDateTimeString} from 'src/utils/dateUtils'
import ChildItemList from './ChildItemList.vue';
const props = defineProps<{
  partId: number;
}>();
const parts = ref<Parts>();

async function init() {
  const res = await getPartDetailData(props.partId);
  if (res.data) {
    parts.value = res.data;
  }
}
init();
</script>

<style scoped>
/* .now-child {
  padding: 0.5rem;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  background-color: #d9d9d9;
} */

.list-item {
  background-color: #d9d9d9;

}

</style>
